<template>
  <view class="web-box">
    <h2 style="color:#fff;padding-bottom:30rpx">请前往微信签署续约合同</h2>
    <view class="web-box-inner">
      <h3 style="text-align:center;padding:30px 0"><span style="color:#6FBF84;padding-right: 10px">截图保存</span> 页面后在 <span  style="color:#6FBF84;padding:0 10px">微信</span> 扫码打开</h3>
<!--      <canvas id="qrcode" canvas-id="qrcode" style="width: 260px;height: 260px;margin: auto;"></canvas>-->
      <vue-qr
        style="display:block;margin:0 auto;"
        ref="qrCode"
        :text="text"
        :logoSrc="logoSrc"
        :color-dark="randomColor"
        :callback="qrCodeCallback"
        width="250"
        height="250"
      ></vue-qr>
      <h3 style="text-align:center;padding:30px 0;color: red">运营人员续约二维码</h3>
    </view>
    <u-modal v-model="showModel2" :title="showTitle" :content='showContent' :show-confirm-button="false"></u-modal>
  </view>
</template>

<script>
import UQRCode from 'uqrcodejs'

import VueQr from 'vue-qr';
export default {
  name: "index",
  components: {
    VueQr
  },
  data() {
    return {
      showContent:'当前续约二维码缺少参数deptId，请刷新或联系管理员!',
      showModel2:false,
      showTitle:'提示',
      deptId:0,
      inductionId:0,
      content: '', // 输入框输入的内容
      text: '', // 二维码实际内容
      logoSrc: '', // 二维码中间的图片
      randomColor: 'black', // 二维码颜色
      qrCodeUrl: '', // 存放生成的二维码url
      isShowDialog: false, // 上传的图片预览dialog
      imageUrl: '' // 上传图片的临时显示链接
    }
  },
  onLoad(option) {
    if (option.deptId) {
      this.deptId = option.deptId
      this.inductionId = option.inductionId
    } else {
      this.showModel2 = true
    }

  },
  onReady() {
    this.text = `https://crm.xinlanrenli.com/xsdcrm-wechat-ui/#/pages/pdf/webIndex2?deptId=${this.deptId}&inductionId=${this.inductionId}`;

    // // 获取uQRCode实例
    // var qr = new UQRCode();
    // // 设置二维码内容
    // qr.data = `https://crm.xinlanrenli.com/xsdcrm-wechat-ui/?deptId=${this.deptId}&type=operateRegister`;
    // // 设置二维码大小，必须与canvas设置的宽高一致
    // qr.size = 260;
    // // 调用制作二维码方法
    // qr.make();
    // // 获取canvas上下文
    // var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
    // // 设置uQRCode实例的canvas上下文
    // qr.canvasContext = canvasContext;
    // // 调用绘制方法将二维码图案绘制到canvas上
    // qr.drawCanvas();
  },
  methods:{
    qrCodeCallback(url){
      this.qrCodeUrl = url
    }
  }
}
</script>

<style scoped>
  .web-box{
    width:100%;
    height:100vh;
    background:#58BE6B;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .web-box-inner{
    width: 90%;
    /*flex-direction: column;*/
    background: #fff;
    border-radius: 15rpx;
    height: 80vh;
    margin: 0rpx auto;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
  }
</style>
